<template>
    <div class='left-nav'>
        <ul>
            <li>
                <i class="icon iconfont icon-dianpu"></i>
                <div>收银</div>
            </li>
            <li>
                <i class="icon iconfont icon-goumai"></i>
                <div>店铺</div>
            </li>
            <li>
                <i class="icon iconfont icon-hanbao"></i>
                <div>商品</div>
            </li>
            <li>
                <i class="icon iconfont icon-huiyuanqia"></i>
                <div>会员</div>
            </li>
            <li>
                <i class="icon iconfont icon-gouwucheman"></i>
                <div>统计</div>
            </li>
            <li>
                <i class="icon iconfont icon-gongnengjianyi"></i>
                <div>设置</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'leftNav'
}
</script>
<style>
    .left-nav{
        color:#fff;
        font-size:10px;
        height:100%;
        width:5%;
        background-color:#1D8CE0;
        float:left;
    }
    .left-nav ul,.left-nav li{
        padding:0;
        margin:0;
        list-style: none;
    }
    .left-nav li{
        border-bottom: 1px solid #20a0ff;
        padding:10px;
    }
    .left-nav li:hover{
        border-bottom: 1px solid #20a0ff;
        padding:10px;
        background-color:#10a5aa;
    }
    .left-nav li:active{
        border-bottom: 1px solid #20a0ff;
        padding:10px;
        background-color:#10a5aa;
    }
    .left-nav div{
        text-align:center;
    }
    .iconfont{
        font-size:24px;
    }
</style>
